
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
    <title>聊天机器人静态页面</title>
  
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>智能助手</h2>
        </div>
        <div class="chat-messages" id="chat-messages">
            <div class="message">
                <div class="avatar bot-avatar">AI</div>
                <div class="message-bubble bot-bubble">
                    <div>你好！我是智能助手。请问有什么可以帮你的？</div>
                    <div class="timestamp" id="current-time"></div>
                </div>
            </div>
            <div class="typing-indicator" id="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="chat-input">
            <input type="text" id="user-input" placeholder="请输入您的问题..." onkeypress="handleKeyPress(event)">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        // 设置初始时间戳
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('current-time').textContent = getCurrentTime();
        });
        
        // 预设的问答对
        const responses = {
            "你好": "你好！很高兴为您服务。",
            "早上好": "早上好！祝您有愉快的一天。",
            "下午好": "下午好！希望您今天过得愉快。",
            "晚上好": "晚上好！今天过得如何？",
            "你叫什么名字": "我是智能助手，很高兴认识您！",
            "你是谁": "我是一个AI聊天助手，可以回答您的问题并提供帮助。",
            "你能做什么": "我可以回答问题、提供信息和进行简单的对话。请随时告诉我您需要什么帮助！",
            "谢谢": "不客气！如果还有其他问题，请随时提问。",
            "再见": "再见！祝您有美好的一天。",
            "天气": "作为静态网页，我无法获取实时天气数据。不过您可以打开天气应用或网站查看最新天气预报。",
            "时间": "根据您的设备显示的时间是：" + new Date().toLocaleTimeString(),
            "日期": "今天是：" + new Date().toLocaleDateString(),
            "帮助": "您可以问我各种问题，我会尽力回答。试试问我'你能做什么'或'你是谁'。"
        };
        
        // 默认回复
        const defaultResponse = "抱歉，我目前无法理解这个问题。您可以尝试问我其他问题，或者输入'帮助'获取更多信息。";
        
        function sendMessage() {
            const input = document.getElementById("user-input");
            const message = input.value.trim();
            
            if (message === "") return;
            
            // 显示用户消息
            addMessage(message, "user");
            
            // 清空输入框
            input.value = "";
            
            // 显示"正在输入"指示器
            const typingIndicator = document.getElementById("typing-indicator");
            typingIndicator.style.display = "inline-block";
            
            // 模拟机器人思考和回复
            setTimeout(() => {
                // 隐藏"正在输入"指示器
                typingIndicator.style.display = "none";
                
                // 生成回复
                let reply = defaultResponse;
                for (const [key, value] of Object.entries(responses)) {
                    if (message.toLowerCase().includes(key.toLowerCase())) {
                        reply = value;
                        break;
                    }
                }
                
                // 显示机器人回复
                addMessage(reply, "bot");
            }, 1000);
        }
        
        function addMessage(text, sender) {
            const chatMessages = document.getElementById("chat-messages");
            const messageDiv = document.createElement("div");
            messageDiv.className = `message ${sender === 'user' ? 'user-message' : ''}`;
            
            const timestamp = getCurrentTime();
            const avatarText = sender === 'user' ? '我' : 'AI';
            
            messageDiv.innerHTML = `
                <div class="avatar ${sender}-avatar">${avatarText}</div>
                <div class="message-bubble ${sender}-bubble">
                    <div>${text}</div>
                    <div class="timestamp">${timestamp}</div>
                </div>
            `;
            
            // 将"正在输入"指示器之前插入新消息
            const typingIndicator = document.getElementById("typing-indicator");
            chatMessages.insertBefore(messageDiv, typingIndicator);
            
            // 滚动到底部
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        function getCurrentTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
        }
        
        function handleKeyPress(event) {
            if (event.key === "Enter") {
                sendMessage();
            }
        }
    </script>
</body>
</html>